<template>
  <div class="home-squad">
    <div class="team-name">
      <span>{{battleTeam.homeName}}</span>
      <img :src="battleTeam.homeTeamImg" alt="">
    </div>
    <div class="role-position">
      <div class="role-position-block"></div>
      <span>首发</span>
    </div>
    <div class="home-squad-table">
      <el-table
              :data="startData"
              :row-style='tableRowStyle'
              :show-header="false"
              :cell-class-name="tableColumnClassName"
              :header-cell-style="tableHeaderColor"
              style="width:100%">
        <el-table-column
                prop="number"
                label="号码"
                width="60">
        </el-table-column>
        <el-table-column
                prop="playerName"
                label="姓名"
                width="180">
          <template slot-scope="scope">
            <div class="player-cell">
              <img class="player-logo" :src="scope.row.playerImg" alt="">
              <span class="myColumn">{{scope.row.playerName}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
                prop="position"
                label="位置"
                width="60">
        </el-table-column>
        <el-table-column
                prop="goal"
                label="进球"
                width="180">
          <template slot-scope="scope">
            <div class="goal-box">
              <div class="single-goal"  v-if="scope.row.goal"  v-for="goal in scope.row.goal">
                <img v-if="goal.type==='goal'" class="goal-img" src="../../../../assets/image/matchProcess/goal.svg" alt="">
                <img v-else class="goal-img" src="../../../../assets/image/matchProcess/ownGoal.svg" alt="">
                <el-tooltip class="item" effect="dark" :content="goal.body" placement="top">
                  <span>{{goal.time}}'</span>
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
                prop="cards"
                label="助攻"
                width="100">
          <template slot-scope="scope">
            <div class="goal-box">
            <div  v-if="scope.row.cards"  v-for="card in scope.row.cards">
              <img v-if="card.type==='yellow'" class="goal-img" src="../../../../assets/image/matchProcess/yellow.svg" alt="">
              <img v-else class="goal-img" src="../../../../assets/image/matchProcess/red.svg" alt="">
              <span>{{card.time}}'</span>
            </div>
          </div>
          </template>
        </el-table-column>
        <el-table-column
                prop="minutes"
                label="替换"
                width="90">
          <template slot-scope="scope">
            <div class="minutes-box">
              <span>{{ scope.row.minutes }}</span>
              <img v-if="scope.row.appearance===1"  class="change-img" src="../../../../assets/image/matchReport/down.svg" alt="">
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="role-position">
      <div class="role-position-block"></div>
      <span>替补</span>
    </div>
    <div class="home-squad-table">
      <el-table
              :data="subData"
              :row-style='tableRowStyle'
              :show-header="false"
              :cell-class-name="tableColumnClassName"
              :header-cell-style="tableHeaderColor"
              style="width:100%">
        <el-table-column
                prop="number"
                label="号码"
                width="60">
        </el-table-column>
        <el-table-column
                prop="playerName"
                label="姓名"
                width="180">
          <template slot-scope="scope">
            <div class="player-cell">
              <img class="player-logo" :src="scope.row.playerImg" alt="">
              <span class="myColumn">{{scope.row.playerName}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
                prop="position"
                label="位置"
                width="60">
        </el-table-column>
        <el-table-column
                prop="goal"
                label="进球"
                width="180">
          <template slot-scope="scope">
            <div class="goal-box">
              <div  v-if="scope.row.goal"  v-for="goal in scope.row.goal">
                <img v-if="goal.type==='goal'" class="goal-img" src="../../../../assets/image/matchProcess/goal.svg" alt="">
                <img v-else class="goal-img" src="../../../../assets/image/matchProcess/ownGoal.svg" alt="">
                <el-tooltip class="item" effect="dark" :content="goal.body" placement="top">
                  <span>{{goal.time}}'</span>
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
                prop="cards"
                label="助攻"
                width="100">
          <template slot-scope="scope">
            <div class="goal-box">
              <div  v-if="scope.row.cards"  v-for="card in scope.row.cards">
                <img v-if="card.type==='yellow'" class="goal-img" src="../../../../assets/image/matchProcess/yellow.svg" alt="">
                <img v-else class="goal-img" src="../../../../assets/image/matchProcess/red.svg" alt="">
                <span>{{card.time}}'</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
                prop="minutes"
                label="替换"
                width="90">
          <template slot-scope="scope">
            <div class="minutes-box">
              <span>{{ scope.row.minutes }}</span>
              <img  class="change-img" src="../../../../assets/image/matchReport/up.svg" alt="">
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    name: "HomeSquad",
    props:{
      homeSquad:{
        type:Array,
        default(){
          return []
        }
      },
      battleTeam:{
        type:Object,
        default(){
          return {}
        }
      },
    },
    data(){
      return {
        playerData:[
          {number:19,appearance:0,playerImg:'https://bsufootball.oss-cn-beijing.aliyuncs.com/sofifa/player%20photos%202021/Chinese%20Super%20League/Zeng%20Cheng.png',playerId:50929,playerName:'曾诚',position:'门将',minutes:97,goal:[],cards:[]},
          {number:5,appearance:0,playerImg:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%B9%BF%E5%B7%9E%E6%81%92%E5%A4%A7%E6%B7%98%E5%AE%9D/players/Zhang%20Linpeng.jpg',playerId:84152,playerName:'张琳芃',position:'后卫',minutes:97,goal:[],cards:[]},
          {number:21,appearance:1,playerImg:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%B9%BF%E5%B7%9E%E6%81%92%E5%A4%A7%E6%B7%98%E5%AE%9D/players/Zhang%20Chenglin.jpg',playerId:41776,playerName:'张成林',position:'后卫',minutes:89,goal:[{type:'ownGoal',body:'乌龙球',time:78}],cards:[{type:'yellow',time:44}]},
          {number:6,appearance:0,playerImg:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%B9%BF%E5%B7%9E%E6%81%92%E5%A4%A7%E6%B7%98%E5%AE%9D/players/Feng%20Xiaoting.jpg',playerId:42893,playerName:'冯潇霆',position:'后卫',minutes:97,goal:[],cards:[]},
          {number:35,appearance:0,playerImg:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%B9%BF%E5%B7%9E%E6%81%92%E5%A4%A7%E6%B7%98%E5%AE%9D/players/Li%20Xuepeng.jpg',playerId:3351,playerName:'李学鹏',position:'后卫',minutes:97,goal:[],cards:[]},
          {number:9,appearance:0,playerImg:'https://bsufootball.oss-cn-beijing.aliyuncs.com/sofifa/player%20photos%202019/Chinese%20Super%20League/Paulinho.png',playerId:36399,playerName:'保利尼奥',position:'中场',minutes:97,goal:[{type:'goal',body:'头球',time:29},{type:'goal',body:'右脚',time:47}],cards:[]},
          {number:10,appearance:1,playerImg:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%B9%BF%E5%B7%9E%E6%81%92%E5%A4%A7%E6%B7%98%E5%AE%9D/players/Zheng%20Zhi.jpg',playerId:320918,playerName:'郑智',position:'中场',minutes:65,goal:[],cards:[{type:'yellow',time:47}]},
          {number:29,appearance:0,playerImg:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%B9%BF%E5%B7%9E%E6%81%92%E5%A4%A7%E6%B7%98%E5%AE%9D/players/Gao%20Lin.jpg',playerId:42895,playerName:'郜林',position:'前锋',minutes:97,goal:[],cards:[{type:'yellow',time:88}]},
          {number:7,appearance:0,playerImg:'https://bsufootball.oss-cn-beijing.aliyuncs.com/sofifa/player%20photos%202019/Chinese%20Super%20League/Alan%20Carvalho.png',playerId:41668,playerName:'阿兰',position:'前锋',minutes:97,goal:[{type:'goal',body:'头球',time:42},{type:'goal',body:'右脚',time:94}],cards:[]},
          {number:20,appearance:1,playerImg:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%B9%BF%E5%B7%9E%E6%81%92%E5%A4%A7%E6%B7%98%E5%AE%9D/players/Yu%20Hanchao.jpg',playerId:19135,playerName:'于汉超',position:'前锋',minutes:79,goal:[],cards:[]},
          {number:24,appearance:0,playerImg:'https://bsufootball.oss-cn-beijing.aliyuncs.com/sofifa/player%20photos%202020/Chinese%20Super%20League/Anderson%20Talisca.png',playerId:130573,playerName:'塔利斯卡',position:'前锋',minutes:97,goal:[],cards:[]},
          {number:16,appearance:2,playerImg:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%B9%BF%E5%B7%9E%E6%81%92%E5%A4%A7%E6%B7%98%E5%AE%9D/players/Huang%20Bowen.jpg',playerId:12,playerName:'黄博文',position:'中场',minutes:32,goal:[],cards:[]},
          {number:27,appearance:2,playerImg:'https://bsufootball.oss-cn-beijing.aliyuncs.com/sofifa%20png/player%20photos%202019/Chinese%20Super%20League/Zheng%20Long.png',playerId:12,playerName:'郑龙',position:'中场',minutes:8,goal:[],cards:[]},
          {number:15,appearance:2,playerImg:'https://bsufootball.oss-cn-beijing.aliyuncs.com/sofifa/new%20photo/playerimgjjj/Zhang%20Wenzhao.jpg',playerId:12,playerName:'张文钊',position:'后卫',minutes:18,goal:[],cards:[]},
        ],
      }
    },
    methods:{
      //设置单个单元格的样式
      tableHeaderColor({row,column,rowIndex,columnIndex}){
        // if(rowIndex === 0 && (columnIndex === 3 ||columnIndex === 4 || columnIndex === 5 || columnIndex === 6 || columnIndex === 7 || columnIndex === 8)){
        //   return {'background-color':'#F1F6F9','padding-left': '21px',"padding-top":'20px'}
        // }
        return {'background-color':'#F1F6F9'}
      },

      //设置表格行的样式
      tableRowStyle({row,rowIndex}){
        return {'background-color':'#F1F6F9'}
        // return {'background-color':'red'}
      },

      //设置指定单元格的ClassName,返回的class不能写在当前组件，要写在全局
      //全局css样式在assets/css/reset.css里面
      tableColumnClassName({row,column,rowIndex,columnIndex}){
        if(columnIndex === 1){
          return 'myColumn'
        }
        return ''
      },
    },
    computed:{
      startData(){
        return this.homeSquad.filter(player=>{
          return player.appearance!==2
        })
      },
      subData(){
        return this.homeSquad.filter(player=>{
          return player.appearance===2
        })
      }
    }
  }
</script>

<style scoped>
  .home-squad {
    width: 50%;
    height: 100%;
    /*background-color: #55a532;*/
  }
  .player-cell {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .player-cell > span {
    margin-left: 10px;
  }
  .player-logo {
    width: 30px;
    height: 30px;
  }
  .team-name {
    position: relative;
    top: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 80%;
    height: 60px;
    /*background-color: red;*/
    margin-left: 20%;
  }
  .team-name >img {
    width: 60px;
    height: 60px;
  }
  .team-name >span {
    font-size: 36px;
    font-weight: bold;
    color: #101010;
    letter-spacing: 5px;
  }
  .role-position {
    margin-left: 30px;
    width: 90px;
    height: 35px;
    font-size: 20px;
    font-weight: bold;
    line-height: 35px;
    /*background-color: blue;*/
    display: flex;
    justify-content: flex-start;
  }
  .role-position > span {
    margin-left: 10px;
  }
  .role-position-block {
    width: 8px;
    height: 100%;
    background-color: #1A936F;
  }
  .home-squad-table {
    width: 670px;
    margin-left: 30px;
  }
  .change-img {
    width: 20px;
    height: 20px;
  }
  .minutes-box {
    display: flex;
    justify-content: flex-start;
    margin-left: 20px;
  }
  .home-squad /deep/ .el-table td {
    padding: 9px 0 ; /*no*/
    font-size: 18px;
    text-align: center;
    font-weight: bold;
  }
  .home-squad /deep/ .el-table th {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }
  .home-squad /deep/ .is-leaf {
    padding: 14px 0 ; /*no*/
    font-weight: bold;
    color: #909399;
  }
  .goal-img {
    width: 20px;
    height: 20px;
  }
  .goal-box {
    display: flex;
    justify-content: center;
  }
  .single-goal {
    display: flex;
    align-items: center;
  }
</style>